<template>
     <svg :style="svgSize" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g id="circle" class="g-circles g-circles--v1">
            <circle :style="circleStyle" id="12" transform="translate(35, 16.698730) rotate(-30) translate(-35, -16.698730) " cx="35" cy="16.6987298" r="10"></circle>
            <circle :style="circleStyle" id="11" transform="translate(16.698730, 35) rotate(-60) translate(-16.698730, -35) " cx="16.6987298" cy="35" r="10"></circle>
            <circle :style="circleStyle" id="10" transform="translate(10, 60) rotate(-90) translate(-10, -60) " cx="10" cy="60" r="10"></circle>
            <circle :style="circleStyle" id="9" transform="translate(16.698730, 85) rotate(-120) translate(-16.698730, -85) " cx="16.6987298" cy="85" r="10"></circle>
            <circle :style="circleStyle" id="8" transform="translate(35, 103.301270) rotate(-150) translate(-35, -103.301270) " cx="35" cy="103.30127" r="10"></circle>
            <circle :style="circleStyle" id="7" cx="60" cy="110" r="10"></circle>
            <circle :style="circleStyle" id="6" transform="translate(85, 103.301270) rotate(-30) translate(-85, -103.301270) " cx="85" cy="103.30127" r="10"></circle>
            <circle :style="circleStyle" id="5" transform="translate(103.301270, 85) rotate(-60) translate(-103.301270, -85) " cx="103.30127" cy="85" r="10"></circle>
            <circle :style="circleStyle" id="4" transform="translate(110, 60) rotate(-90) translate(-110, -60) " cx="110" cy="60" r="10"></circle>
            <circle :style="circleStyle" id="3" transform="translate(103.301270, 35) rotate(-120) translate(-103.301270, -35) " cx="103.30127" cy="35" r="10"></circle>
            <circle :style="circleStyle" id="2" transform="translate(85, 16.698730) rotate(-150) translate(-85, -16.698730) " cx="85" cy="16.6987298" r="10"></circle>
            <circle :style="circleStyle" id="1" cx="60" cy="10" r="10"></circle>
        </g>
        <use xlink:href="#circle" class="use"/>
    </svg>
</template>
<script>
export default {
    name: 'SvgLoading',
    data: function() {	
        return {}
    },
    methods: {},
    props: {
        svgSize: {
            type: Object,
            default () {
                return {}
            }
        },
        circleStyle: {
            type: Object,
            default () {
                return {}
            }
        },
    }
}
</script>

<style lang="scss" scoped>
    #circle {
    #circle.blur {
            circle {
                fill: #e50838;
            }
        }
    }
    svg {
        height: .32rem;
        width: .32rem;
        overflow: visible;
        vertical-align: middle;
        /*   border: 1px solid red; */
    }
    .g-circles {
        -webkit-transform: scale(0.9) translate(7px, 7px);
        -ms-transform: scale(0.9) translate(7px, 7px);
        transform: scale(0.9) translate(7px, 7px);
    }
    circle {
        fill: #e50838;
        fill-opacity: 0;
        -webkit-animation: opacity 1.2s linear infinite;
        animation: opacity 1.2s linear infinite;
    }
    circle:nth-child(12n + 1) {
        -webkit-animation-delay: -0.1s;
        animation-delay: -0.1s;
    }
    circle:nth-child(12n + 2) {
        -webkit-animation-delay: -0.2s;
        animation-delay: -0.2s;
    }
    circle:nth-child(12n + 3) {
        -webkit-animation-delay: -0.3s;
        animation-delay: -0.3s;
    }
    circle:nth-child(12n + 4) {
        -webkit-animation-delay: -0.4s;
        animation-delay: -0.4s;
    }
    circle:nth-child(12n + 5) {
        -webkit-animation-delay: -0.5s;
        animation-delay: -0.5s;
    }
    circle:nth-child(12n + 6) {
        -webkit-animation-delay: -0.6s;
        animation-delay: -0.6s;
    }
    circle:nth-child(12n + 7) {
        -webkit-animation-delay: -0.7s;
        animation-delay: -0.7s;
    }
    circle:nth-child(12n + 8) {
        -webkit-animation-delay: -0.8s;
        animation-delay: -0.8s;
    }
    circle:nth-child(12n + 9) {
        -webkit-animation-delay: -0.9s;
        animation-delay: -0.9s;
    }
    circle:nth-child(12n + 10) {
        -webkit-animation-delay: -1s;
        animation-delay: -1s;
    }
    circle:nth-child(12n + 11) {
        -webkit-animation-delay: -1.1s;
        animation-delay: -1.1s;
    }
    circle:nth-child(12n + 12) {
        -webkit-animation-delay: -1.2s;
        animation-delay: -1.2s;
    }
    @-webkit-keyframes opacity {
        3% {
            fill-opacity: 1;
        }

        75% {
            fill-opacity: 0;
        }
    }
    @keyframes opacity {
        3% {
            fill-opacity: 1;
        }

        75% {
            fill-opacity: 0;
        }
    }
</style>